<!-- 数据分析页面2 -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../static/css/index.css">
 </head>
 <body>
    <!-- 导航栏 -->
    <nav>
        <ul class="nav-list">
            <li><a href="/">首页</a></li>
            <li><a href="/page1">分类统计</a></li>
            <li><a href="/page2">评分统计</a></li>
            <li><a href="#about">关于我们</a></li>
        </ul>
    </nav>
    <link
    href="../static/css/all.min.css"
    rel="stylesheet"
    type="text/css"
  />
  <link
    href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
    rel="stylesheet"
  />

  <!-- Custom styles for this template-->
  <link href="../static/css/sb-admin-2.min.css" rel="stylesheet" />

  <!-- Line Chart -->
  <div class="card shadow mb-4 w-100 h-100">
    <!-- Card Header - Dropdown -->
    <div
        class="card-header py-3 d-flex flex-row align-items-center justify-content-between"
    >
        <h6 class="m-0 font-weight-bold text-primary">
            电影评分统计
        </h6>
        <div class="dropdown no-arrow">
            <a
                class="dropdown-toggle"
                href="#"
                role="button"
                id="dropdownMenuLink"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"
            >
                <i
                    class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"
                ></i>
            </a>
            <div
                class="dropdown-menu dropdown-menu-right shadow animated--fade-in"
                aria-labelledby="dropdownMenuLink"
            >
                <div class="dropdown-header">Dropdown Header:</div>
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">
                    Something else here
                </a>
            </div>
        </div>
    </div>
    <!-- Card Body -->
    <div class="card-body h-100">
        <div
            id="movie_score_chart"
            style="width: 100%; height: 100%"
        ></div>
    </div>
</div>

<!-- Content Row -->

</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->


</div>
<!-- End of Content Wrapper -->
</div>
<!-- End of Page Wrapper -->

<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>

<!-- Logout Modal-->
<div
class="modal fade"
id="logoutModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
<button
  class="close"
  type="button"
  data-dismiss="modal"
  aria-label="Close"
>
  <span aria-hidden="true">×</span>
</button>
</div>


</div>
</div>
</div>

<!-- Bootstrap core JavaScript-->
<script src="../static/vendor/jquery/jquery.min.js"></script>
<script src="../static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- Core plugin JavaScript-->
<script src="../static/vendor/jquery-easing/jquery.easing.min.js"></script>

<!-- Custom scripts for all pages-->
<script src="../static/js/sb-admin-2.min.js"></script>

<!-- Page level plugins -->
<script src="../static/vendor/chart.js/Chart.min.js"></script>

<!-- Page level custom scripts -->
<script src="../static/js/demo/chart-area-demo.js"></script>


<script src="../static/js/echarts.min.js"></script>



<script>
var chartDom = document.getElementById("movie_score_chart");
var myChart = echarts.init(chartDom);
var option;
var ratingData = {{ movie_rating_distribution|tojson }};
console.log(ratingData)

option = {
title: {
text: "",
subtext: "来源：豆瓣数据",
left: "center",
},
xAxis: {
type: "category",
boundaryGap: false,
data: ratingData.map(item => item[0]),
},
yAxis: {
type: "value",
},
series: [
{
data: ratingData.map(item => item[1]),
type: "line",
areaStyle: {},
},
],
tooltip: {
  trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
  axisPointer: {// 坐标轴指示器，坐标轴触发有效
    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
  }
},
};

option && myChart.setOption(option);
</script>

</body>
</html>